<template>
	<div class="ruler-wrap" :id="el"></div>
</template>
<script lang="ts" setup>
import { defineProps, ref, watch, onMounted } from "vue";
import useCommon from "@/src/store/common";
const commonStore = useCommon();

const props = defineProps({
	// 滚动偏移量
	scrollOffset: {
		type: Number,
		default: 0,
	},
	// 刻度方向 目前只有两种 X轴  Y轴
	direction: {
		type: String,
		default: "X",
	},
	el: {
		type: String,
		required: true,
		default: "ruler",
	},
});
let startScale = ref(0);
let cxt = ref<CanvasRenderingContext2D | null>(null);
let canvas = ref<HTMLCanvasElement | null>(null);
let scaleValueList = ref<number[]>([]);
// 监听滚动变化 重新计算标尺刻度
watch([() => props.scrollOffset, () => commonStore.scaleRatio], (newVal, oldVal) => {
	initPlugin();
});
onMounted(() => {
	initPlugin();
});
function initPlugin() {
	if (!props.el) {
		console.warn("没有容器元素的参数");
		return false;
	}

	// 初始刻度值设置
	startScale.value = props.scrollOffset / commonStore.rulerConfig.minSpace;

	const rulerWrap = setWrapSize();
	if (!rulerWrap) {
		return;
	}
	getCanvas(rulerWrap);

	setScaleValList();

	// 画刻度
	drawRuler();
}
// 设置容器宽高
function setWrapSize() {
	// 获取容器
	let rulerWrap = document.getElementById(props.el);
	if (!rulerWrap) {
		return;
	}
	const InitOptions = {
		X: {
			wrap_W: "100%",
			wrap_H: commonStore.rulerConfig.rulerSize + "px",
		},
		Y: {
			wrap_W: commonStore.rulerConfig.rulerSize + "px",
			wrap_H: "100%",
		},
	};
	rulerWrap.style.width =
		InitOptions[props.direction as keyof typeof InitOptions].wrap_W;
	rulerWrap.style.height =
		InitOptions[props.direction as keyof typeof InitOptions].wrap_H;
	return rulerWrap;
}
// 获取canvas
function getCanvas(rulerWrap: HTMLElement) {
	canvas.value = rulerWrap.getElementsByTagName("canvas")[0]; // 获取容器下的this.canvas标签
	// 没有this.canvas就创建一个
	if (!canvas.value) {
		canvas.value = document.createElement("canvas"); // 创建this.canvas标签
		rulerWrap.appendChild(canvas.value);
	}
	// 设置刻度尺的宽高
	canvas.value.width =
		props.direction === "X" ? rulerWrap.clientWidth : rulerWrap.offsetHeight;

	canvas.value.height = commonStore.rulerConfig.rulerSize;
	if (props.direction === "Y") {
		canvas.value.style.transform = "rotateZ(90deg)";
		canvas.value.style.transformOrigin = "left bottom";
	}
	cxt.value = canvas.value.getContext("2d");
}
// 设置刻度尺 码数
function setScaleValList() {
	if (!canvas.value) {
		return;
	}
	// 刻度值数组
	scaleValueList.value = [];

	// 刻度当前宽度 + 滚动的偏移量 等于 最大宽度; 划分多少个刻度
	const maxScaleVal =
		(canvas.value.width + props.scrollOffset) /
		commonStore.rulerConfig.minSpace /
		commonStore.rulerConfig.midDivision;
	const curScaleVal = Math.floor(startScale.value / commonStore.rulerConfig.midDivision);
	// section分割刻度段
	for (let i = curScaleVal; i <= maxScaleVal; i += commonStore.rulerConfig.section) {
		scaleValueList.value.push(i);
	}
}

// 画刻度尺
function drawRuler() {
	if (!cxt.value || !canvas.value) {
		return;
	}
	// 清空画布
	cxt.value.clearRect(0, 0, canvas.value.width, commonStore.rulerConfig.rulerSize);

	const baseDivision = 2;

	// 刻度尺头部横线 x：从上往下画横线 y:从下往上画横线
	cxt.value.beginPath();
	const OriginY = props.direction === "X" ? 0 : commonStore.rulerConfig.rulerSize;
	cxt.value.moveTo(baseDivision, OriginY);
	cxt.value.lineTo(canvas.value.width + baseDivision, OriginY);
	cxt.value.stroke(); // 上色
	cxt.value.restore();
	cxt.value.closePath(); // 结束路径

	// 计算刻度线总数量
	const lineSum = (canvas.value.width + props.scrollOffset) / commonStore.rulerConfig.minSpace;

	// 画刻度线
	for (let i = Math.floor(startScale.value); i < lineSum; i++) {
		cxt.value.beginPath();
		cxt.value.save();
		// 设置颜色
		cxt.value.strokeStyle = "#bbb";
		// 线宽
		cxt.value.lineWidth = 1;
		cxt.value.lineCap = "round";

		// 去掉刻度线偏移距离 从原点开始画线
		const curOffseSpace =
		commonStore.rulerConfig.minSpace * (i - Math.floor(startScale.value)) + baseDivision;
		cxt.value.moveTo(curOffseSpace, OriginY);
		if (props.direction === "X") {
			// 默认刻度高度
			cxt.value.lineTo(curOffseSpace, Math.floor(commonStore.rulerConfig.rulerSize * 0.2));
			// 重绘偶数刻度高度
			if (i % 2 === 0) {
				cxt.value.strokeStyle = "#999";
				cxt.value.lineTo(curOffseSpace, Math.floor(commonStore.rulerConfig.rulerSize * 0.3));
			}
			// 重绘阶段高度
			if (i % commonStore.rulerConfig.midDivision === 0) {
				cxt.value.strokeStyle = "#666";
				cxt.value.lineTo(curOffseSpace, Math.floor(commonStore.rulerConfig.rulerSize * 0.4));
			}
		} else {
			// 默认刻度高度
			cxt.value.lineTo(curOffseSpace, Math.floor(commonStore.rulerConfig.rulerSize * 0.8));
			// 重绘偶数刻度高度
			if (i % 2 === 0) {
				cxt.value.strokeStyle = "#999";
				cxt.value.lineTo(curOffseSpace, Math.floor(commonStore.rulerConfig.rulerSize * 0.7));
			}
			// 重绘阶段高度
			if (i % commonStore.rulerConfig.midDivision === 0) {
				cxt.value.strokeStyle = "#666";
				cxt.value.lineTo(curOffseSpace, Math.floor(commonStore.rulerConfig.rulerSize * 0.6));
			}
		}

		cxt.value.stroke();
		cxt.value.restore();
		cxt.value.closePath();
	}

	// 添加体重数字
	cxt.value.beginPath();
	cxt.value.font = "10px Arial";
	cxt.value.fillStyle = "#333";
	cxt.value.textAlign = "left";
	cxt.value.textBaseline = "bottom";

	// 填写刻度值
	scaleValueList.value.forEach((num, i) => {
		if (!cxt.value) {
			return;
		}
		// Math.floor(this.startScale) % this.minSpace：10个刻度为周期，获取缺失刻度数；还剩下的刻度数
		const curSumDivision =
			i * commonStore.rulerConfig.midDivision -
			(Math.floor(startScale.value) % commonStore.rulerConfig.midDivision);
		cxt.value.fillText(
			num + "m",
			commonStore.rulerConfig.minSpace * curSumDivision + baseDivision,
			Math.floor(commonStore.rulerConfig.rulerSize * 0.7)
		);
	});

	cxt.value.closePath();
}
</script>
<style lang="less" scoped>
.ruler-wrap {
	/*height: 60px;*/
	line-height: 1px;
}
</style>
